<script lang="ts" setup>
import { computed, reactive, watch } from 'vue'
import { useDesignStore } from '@/store/design'
import type { CustomComponent } from '@/type'
import { SvgIcon } from '@/components'

const emits = defineEmits(['shrink'])
const store = useDesignStore()
// layer 组件数据集合
const layerControlData = reactive<{ layerList: CustomComponent[] }>({
  layerList: [],
})

// 获取当前展示在 画布中的组件列表
const layerList = computed(() => store.$state.componentsInCanvas)

// 当前选中组件
const curComponentIndex = computed(() => store.$state.curComponentIndex)

watch(layerList, (n, o) => {
  layerControlData.layerList = (n || []).map((o: CustomComponent) => {
    o.ifLock = o.ifLock ? o.ifLock : false
    o.ifShow = o.ifShow ? o.ifShow : true
    return o
  })
})

function selectLayer(index: number) {
  store.$patch({
    curComponentIndex: index,
  })
}

function shrink() {
  emits('shrink', true)
}
</script>

<template>
  <div class="layer-control-container">
    <div class="top">
      <span class="left-box">
        图层
        <SvgIcon name="layer" />
      </span>
      <span class="right-box">
        <el-button-group size="small">
          <el-tooltip effect="dark" placement="top" content="缩略图">
            <el-button type="" plain>
              <template #icon>
                <SvgIcon name="i-fluent:image-alt-text-20-filled" />
              </template>
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" placement="top" content="文本列">
            <el-button type="" plain>
              <template #icon>
                <SvgIcon name="i-fluent:textbox-16-filled" />
              </template>
            </el-button>
          </el-tooltip>
        </el-button-group>
        <SvgIcon class="prev" title="收起" size="1.1em" name="i-ooui:previous-ltr" @click="shrink" />
      </span>
    </div>
    <div class="content">
      <ul>
        <li v-for="(item, index) in layerList" :key="item.title || `${index}`" :class="curComponentIndex === index ? 'active' : ''" @click="selectLayer(index)">
          <SvgIcon :name="item.icon" class="img text-[2em]" />
          <span class="title">
            <el-text truncated>{{ item.title }}</el-text>
          </span>
          <span class="control">
            <SvgIcon class="lock" name="i-icon-park-solid:lock" />
            <SvgIcon class="show" name="i-bxs:show" />
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped src='./index.scss' lang="scss"></style>
